<template>
  <div class="delay-node">
    <el-form label-position="top" :rules="rules" label-width="80px" :model="formData" ref='nodeForm'>
      <div class="delay-setting">
        <el-form-item label="设置等待时长" prop="delayTime" class="delay-time">
          <el-input-number v-model="formData.delayTime" :min="0" :max='99' placeholder="请输入" class="input-number" :controls='false'></el-input-number>
        </el-form-item>
        <el-form-item prop="timeUnit">
          <el-select v-model="formData.timeUnit" placeholder="请选择" class="time-unit">
            <el-option label="秒" value="S"></el-option>
            <el-option label="分钟" value="M"></el-option>
          </el-select>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import { deepClone } from '@/utils/helper/jsUtil'
import RuleNodeBaseClass from '@/components/ruleNode/RuleNodeBaseClass'

export default {
  name: 'AdvancedLibDelayNode',
  mixins: [RuleNodeBaseClass],
  props: {
  },
  data() {
    return {
      formData: {
        delayTime: undefined,
        timeUnit: null
      },
      rules: {
        delayTime: [
          { required: true, message: '请输入延迟时间', trigger: 'blur' }
        ],
        timeUnit: [
          { required: true, message: '请选择延迟时间单位', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
  },
  methods: {
    initValue() {
      const initFormData = this.initialForm ? deepClone(this.initialForm) : {};
      (initFormData.delayTime === null) && (initFormData.delayTime = undefined)
      !initFormData.timeUnit && (initFormData.timeUnit = 'S')
      Object.assign(this.formData, initFormData)
    },
    getFormData() {
      return deepClone(this.formData)
    },
    validateForm() {
      let isValid
      this.$refs.nodeForm.validate(valid => { isValid = valid })
      return isValid
    }
  }
}
</script>
<style lang="scss">
.delay-node {
  .delay-setting{
    display: flex;
    align-items: flex-end;
    position: relative;
    .delay-time{
      flex: 1 0 auto;
    }
  }
  .input-number{
    width: 100%;
    .el-input__inner{
      text-align: left;
    }
  }
  .el-form-item{
    .time-unit{
      width: 120px;
      .el-input, .el-input.is-focus{
        .el-input__inner, .el-input__inner:hover, .el-input__inner:focus{
          border-left: none;
          transition: none;
          border-color: #e0e0e0;
        }
      }
    }
    &.is-error{
      .time-unit .el-input__inner{
        border-left: 1px solid #E15863;
        border-color: #E15863;
      }
    }
  }
}
</style>
